<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品界面</title>
  <link rel="stylesheet" href="mifengmi.css">
</head>

<body>
  <nav class="navbar">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="products.html">商城</a></li>
      <li><a href="supply.html">供货</a></li>
      <li class="right">我的小金库: ¥<span id="walletAmount">520</span></li>
    </ul>
  </nav>

  <div class="content">
    <h1>商品界面</h1>
    <div class="product-grid" id="productGrid">
      <!-- 商品方块 -->
    </div>
  </div>

  <!-- 余额不足模态框 -->
  <div id="insufficientFundsModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>余额不足，无法购买此商品。</p>
    </div>
  </div>

  <!-- 购买成功模态框 -->
  <div id="purchaseSuccessModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>购买成功！</p>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const productGrid = document.getElementById('productGrid');
      const walletAmountElement = document.getElementById('walletAmount');
      let walletAmount = parseFloat(walletAmountElement.textContent);
      const insufficientFundsModal = document.getElementById('insufficientFundsModal');
      const purchaseSuccessModal = document.getElementById('purchaseSuccessModal');
      const closeModal = document.querySelectorAll('.close');

      function displayProducts() {
        const products = JSON.parse(localStorage.getItem('products')) || [];
        productGrid.innerHTML = '';
        products.forEach((product, index) => {
          const productCard = document.createElement('div');
          productCard.className = 'product-card';
          productCard.style.backgroundImage = `url(${product.image || 'images/default.png'})`;
          productCard.innerHTML = `
            <h3>${product.name}</h3>
            <p>¥${product.price}</p>
            <button onclick="buyProduct(${index})">购买</button>
          `;
          productGrid.appendChild(productCard);
        });
      }

      window.buyProduct = function (index) {
        const products = JSON.parse(localStorage.getItem('products')) || [];
        const product = products[index];
        if (product.price <= walletAmount) {
          walletAmount -= product.price;
          walletAmountElement.textContent = walletAmount.toFixed(2);
          purchaseSuccessModal.style.display = 'block';
        } else {
          insufficientFundsModal.style.display = 'block';
        }
      };

      closeModal.forEach(button => {
        button.addEventListener('click', () => {
          insufficientFundsModal.style.display = 'none';
          purchaseSuccessModal.style.display = 'none';
        });
      });

      window.addEventListener('click', (event) => {
        if (event.target === insufficientFundsModal) {
          insufficientFundsModal.style.display = 'none';
        }
        if (event.target === purchaseSuccessModal) {
          purchaseSuccessModal.style.display = 'none';
        }
      });

      displayProducts();
    });
  </script>
</body>

</html>